<script setup lang="ts">
import { useRoute } from "vue-router";

defineProps({
  to: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
});
const route = useRoute();
</script>

<template>
  <RouterLink :to="to">
    <span
      class="my-1 flex w-full items-center justify-start p-3 text-gray-800 lg:hover:bg-rose-100 lg:hover:rounded-lg"
      :class="
        route.path === to &&
        'border-green-500 border-l-4 lg:border-l-0 lg:border-r-4 lg:border-rose-400 lg:hover:rounded-lg'
      "
    >
      <span>
        <slot />
      </span>
      <span class="mx-4 text-sm">
        {{ title }}
        <!-- {{ route.path }}
        {{ to }} -->
      </span>
    </span>
  </RouterLink>
</template>
